<template>
	<view class="pjFilter">
		<view class="title">{{ '配件任务' }}</view>
		 <view class="filterContent" >
		 	<view class="filterContent">
		 		<view class="main">
		 			<view class="left">
		 				<view class="leftContent">
		 					<view :class="['leftItem', actOne == index ? 'act' : '']" @click="handleClickLeft(index, item)" v-for="(item, index) in list" :key="index">
		 						{{ item.name }}
		 						<view class="redDot" v-if="isShowRedDot(item.childList)"></view>
		 					</view>
		 				</view>
		 			</view>
		 	
		 			<view class="right" v-if="list.length">
		 				<view class="rightContent" v-for="(e,j) in list[actOne].children" :key="j">
		 					<view class="levelTitle">{{e.name}}</view>
		 					<view class="levelList">
		 						<view :class="['tagItem',isSelect(el.id)?'activeTage':'']" v-for="(el,idx) in e.children" :key="idx" @click="choosePart(el,index,j)">
		 							
		 							{{el.name}}
		 						</view>
		 					</view>
		 				</view>
		 				
		 			</view>
		 		</view>
		 	</view>
		 </view>
	
		<!-- end -->
	</view>
</template>

<script>
import { repairFittingSelected } from '@/apis/repair.js';
export default {
	data() {
		return {
			list: [],
			actOne: 0,
			actTwo:0,
			actThree:'',
			selectArr:[]
		};
	},
	created() {
		this.fetchPartList();
	},
	methods: {
		initData(arr) {
			this.selectArr = arr;
		},
		isShowRedDot(arr) {
			 let selectList = this.selectArr.map(item=>item.id);
			 return arr.filter(item => selectList.indexOf(item) > -1).length;
		},
		clickTwo(i) {
			this.actTwo = i;
		},
		clickThree(i) {
			this.actThree = i;
		},
		
		handleClickLeft(i, item) {
			this.actOne = i;
		},
		choosePart(res,index,j) {
			let idx = this.selectArr.findIndex(item => item.id == res.id);
			if (idx !== -1) {
				this.selectArr.splice(idx, 1);
			} else {
				this.selectArr.push({ id: res.id, parentId: res.parentId });
			}
			console.log(this.selectArr,res.id,6666);
			
			this.$emit('choosePart',this.selectArr);
		},
		isSelect(id) {
			// console.log(id,this.selectArr.find(e => e.id == id));
			return this.selectArr.find(e => e.id == id);
		},
		fetchPartList() {
			repairFittingSelected({}).then(res => {
				// console.log(res.data, '配件');
				if (res) {
					// this.list = res.data;
					let newArr	= res.data.map(item=>{
						let arr = [];
						if (item.children && item.children.length) {
							item.children.map(e=>{
								if (e.children && e.children.length) {
									e.children.map(j=>{
										arr.push(j.id);
									});
								}
							});
						}
						return {...item,childList:arr};
					});
					// console.log(newArr,"新的shuzu ");
					this.list = newArr;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pjFilter {
	.title {
		color: #333;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
	}
	// display: flex;
	.filterContent {
		// height: 300rpx;
		// overflow-y: auto;
	}
	.main {
		display: flex;
	}
	.left {
		background: #f6f6f6;
		width: 232rpx;
		height: 300rpx;
		overflow-y: auto;
		.leftItem {
			// height: 80rpx;
			padding: 20rpx 46rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			background: #f6f6f6;
			font-size: 28rpx;
			color: #666;
			position: relative;
			overflow: hidden; /*文本超出隐藏*/
			text-overflow: ellipsis; /*文本超出显示省略号*/
			white-space: nowrap;
		}
		.redDot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #e02020;
			position: absolute;
			right: 0;
			top: 0;
		}
		.act {
			color: #0091ff;
			background-color: #fff;
		}
	}

	.right {
		background-color: #fff;
		width: calc(100% - 232rpx);
		padding: 0 30rpx;
		height: 300rpx;
		overflow: auto;
		.rightContent {
			// display: flex;
			// width: 100%;
			// flex-wrap: wrap;
			// padding: 20rpx 0 48rpx 0;
			.levelTitle{
				font-weight: 600;
				color: #333;
				font-size: 28rpx;
				margin-bottom: 20rpx
			}
			.levelList{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}
	
		.tagItem {
			width: 216rpx;
			height: 48rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			text-align: center;
			line-height: 48rpx;
			margin-bottom: 20rpx;
			color: #666;
			font-size: 28rpx;
			// padding: 0 16rpx;
			// margin-right: 16rpx;
			overflow: hidden; /*文本超出隐藏*/
			text-overflow: ellipsis; /*文本超出显示省略号*/
			white-space: nowrap;
		}
		
		.activeTage {
			border-color: #0091ff;
			color: #0091ff;
		}
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
